<script setup>
import { ref } from 'vue'
import { GetSourceService } from '@/api/sources'

// 节点数据源组件
import SourceEdit from './SourceEdit.vue'
import { DeleteSourceService } from '@/api/sources'
const visibleDrawer = ref(false)

// 获取节点数据源信息
const sourceList = ref([])
const nodeIndex = ref()
const getSourceList = async () => {
  const {
    data: { data }
  } = await GetSourceService('node', nodeIndex.value)
  console.log(data)
  sourceList.value = data
}

// 显示弹窗
const open = (nodeId) => {
  visibleDrawer.value = true
  nodeIndex.value = nodeId
  getSourceList()
}

// 编辑数据源选项
const sourceRef = ref()
const handleEdit = (source) => {
  sourceRef.value.open(source)
}

// 删除数据源信息
const handleDel = (id) => {
  ElMessageBox.confirm('确认删除?', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      await DeleteSourceService(id)
      // 成功回调
      ElMessage.success('删除成功')
      getSourceList()
    })
    .catch(() => {})
}

const emit = defineEmits(['success'])
const closeDialog = () => {
  visibleDrawer.value = false
  emit('success')
}
defineExpose({
  open
})
</script>

<template>
  <el-dialog
    v-model="visibleDrawer"
    title="节点数据源信息"
    direction="rtl"
    width="450"
    align-center
  >
    <ul style="margin-left: -35px; list-style: none; margin-top: -20px">
      <li
        v-for="(item, index) in sourceList"
        :key="index"
        style="margin-bottom: 15px"
      >
        <span style="color: azure">{{ item.value }}</span>
        <span style="float: right; margin-right: 30px">
          <span
            style="margin-right: 10px; color: skyblue; cursor: pointer"
            @click="handleEdit(item)"
          >
            编辑
          </span>
          <span style="color: red; cursor: pointer" @click="handleDel(item.id)">
            删除
          </span>
        </span>
      </li>
    </ul>
    <template #footer>
      <span class="dialog-footer">
        <el-button
          type="primary"
          @click="handleEdit({ value: '', type: 'node', typeId: nodeIndex })"
          style="width: 80px; height: 35px; font-size: 12px"
          >添加数据源</el-button
        ><el-button
          @click="closeDialog"
          style="width: 80px; margin-left: 50px; height: 35px; font-size: 12px"
          >关闭</el-button
        >
      </span>
    </template>
  </el-dialog>
  <SourceEdit ref="sourceRef" @success="getSourceList"></SourceEdit>
</template>
